import './Footer.css';
import PubSub from 'pubsub-js';
import React from 'react';

export default function Footer(props) {
  const { list } = props;
  const total = list.length;
  // const okTotal = list.filter((item) => {
  //   return item.isDone === true;
  // }).length;
  /* 可以计算li's't 中的完成数的统计的两个数组方法 */
  const isDoneTotal = list.reduce((pre, item) => {
    return pre + (item.isDone ? 1 : 0);
  }, 0);
  function checkedAllHandel() {
    PubSub.publish('checkedAll');
  }
  function clearIsDoneHandel() {
    PubSub.publish('clearIsDone');
  }
  return (
    <div className="todo-footer">
      <label>
        <input
          type="checkbox"
          checked={isDoneTotal === total && total !== 0 ? true : false}
          onChange={checkedAllHandel}
        />
      </label>
      <span>
        <span>已完成 {isDoneTotal}</span> / 全部 {total}
      </span>
      <button className="btn btn-danger" onClick={clearIsDoneHandel}>
        清除已完成任务
      </button>
    </div>
  );
}
